<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
		<link href="resources/css/mui.min.css" rel="stylesheet" />
		<link href="resources/css/common1.css" rel="stylesheet" />
		<link href="resources/css/swiper.css" rel="stylesheet" />
		<script src="resources/js/swiper.js"></script>
		<script src="resources/js/jquery-1.10.1.min.js"></script>
		<script src="resources/js/common.js"></script>
		<script src="resources/js/mui.min.js"></script>
		<script src="resources/js/vue.min.js"></script>
		<script src="resources/js/WebViewJavascriptBridge.js"></script>
		<title>超贷</title>
		<style>
			.mui-content{background-color: #fff;}
			.mui-bar{background-color: #2487ff;}
			a:active{color: #fff;}
			.mui-title{color: #fff;}
			.font-size15{font-size: 15px;}
			.titBox{ background: #2487ff;}
			.mui-table-view .mui-media-object {line-height: 42px; max-width: 50px; height: 50px;}
			.titBox ul{background: #2487ff; padding: 0px 10px 10px 0px;}
			.newTit2 span{font-size: 12px; border-radius: 5px; border:1px solid #EEEEEE; color: #FFF; padding: 2px 3px; margin-right: 15px;}
			.newTit{font-size: 12px; }
			.newImg{border-radius: 3px;}
			.mui-content>.mui-table-view:first-child{margin-top: 0px;}
			.mui-table-view:before, .mui-table-view:after {background-color: #2487ff;}
			.moneyBox{ width: 100%; background-color: #FFFFFF; height: 150px; padding: 35px 10px 10px 10px; color: #2487ff;}
			.moneyTitle{height: 100%; background-image: url(resources/images/detailsBg.png); background-size: 100% 100%;}
			.begMoney, .endMoney{ height: 105px; font-size: 18px; color: #2487ff; line-height: 195px; text-align: center;}
			.moneyTitle p{ margin-top: 40px; margin-bottom: 5px; text-align: center;}
			.moneyTitle input{width: 80%;border: 0px; font-weight: 700; font-size: 36px;    height: 50px;   line-height: 50px;   text-align: center; margin-left: 10%; text-align: center; color: #2487ff;}
			.moneyTxt{text-align: center; height: 60px; line-height: 20px; padding: 10px 10px 0px 10px; background-color: #FFFFFF;}
			.moneydateTit{color: #6c747d;}
			.moneydate{color: #2a2e32 ; font-size: 14px;}
			.moneyTxt .active{background-color: #2487ff; color: #FFFFFF;}
			
			.listBox{background-color: #FFFFFF; height: 250px; margin-top: 10px;  padding: 10px;}
			.listBox div{border-bottom: 1px solid #EFEFEF; height: 40px; line-height: 40px;}
			.listD{text-align: right;}
			
			.footerBtn{width: 100%; height: 40px; line-height: 40px; background-color: #2487ff; font-size:14px; color: #FFFFFF; text-align: center; position: fixed; bottom: 0px;}
			#toBack1{color: #ffffff; position: absolute;left: 10px; top: 10px;    z-index: 99;}
    		.mui-table-view-cell {   padding: 10px 0px 11px 15px;}
    		.titBoxTxt{width: 100%; text-align: center; height: 50px; line-height: 50px; font-size: 14px; color: #fff;}
		</style>
	</head>

	<body>
	<div id="app">
	<div class="mui-content titBox">
		<div class="titBoxTxt"><a id="toBack1"  href="javascript:;" onclick="closePage();"  class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorf"></a>
	{{showDetails.name}}</div>	
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left newImg"  :src="showDetails.iconUrl">
						<div class="mui-media-body font-size15 colorf">
							<span class="newTit colorf">{{showDetails.totalApplyCount}}人申请通过</span>
							<p class='mui-ellipsis newTit2'><!-- <span>10秒审核</span><span>快速下款</span><span>芝麻分贷</span> -->
								<template v-for="(greenTag,index) in greenTags"> 
									<template v-if="index < 3">
										<span>{{greenTag}}</span>
									</template>
								</template>
							</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="mui-content">
			<div  class="mui-row moneyBox" >
		        <div class="mui-col-sm-2 mui-col-xs-2 begMoney">
		        	0.00
		        </div>
		        <div class="mui-col-sm-8 mui-col-xs-8 moneyTitle">
		        	<p class="color1">借款金额</p>
		        	<input type="number" :value="showDetails.averageqQuota" id="numberBox"  :dataMax ="showDetails.averageqQuota" >
		        </div>
		        <div class="mui-col-sm-2 mui-col-xs-2 endMoney">
		        	{{showDetails.averageqQuota}}
		        </div>
			</div>
			<div  class="mui-row moneyTxt" >
		        <div class="mui-col-sm-2 mui-col-xs-2 moneydateTit" >
		        	期限:
		        </div>
		        <div class="mui-col-sm-2 mui-col-xs-2 moneydate active" data="7" :data-Interest ="showDetails.interestRate7">
		        	7天
		        </div>
		        <div class="mui-col-sm-2 mui-col-xs-2 moneydate" data="15" :data-Interest ="showDetails.interestRate15">
		        	15天
		        </div>
		        <div class="mui-col-sm-2 mui-col-xs-2 moneydate" data="30" :data-Interest ="showDetails.interestRate30">
		        	1个月
		        </div>
		        <div class="mui-col-sm-2 mui-col-xs-2 moneydate" data="90" :data-Interest ="showDetails.interestRate90">
		        	3个月
		        </div>
		        <div class="mui-col-sm-2 mui-col-xs-2 moneydate" data="120" :data-Interest ="showDetails.interestRate180">
		        	6个月
		        </div>
			</div>
			
			<div  class="mui-row listBox" >
		        <div class="mui-col-sm-6 mui-col-xs-6 listTit color4" >
		        	还款金额:
		        </div>
		        <div class="mui-col-sm-6 mui-col-xs-6 listD color3" id="repayment">
		        	5300元
		        </div>
		        <div class="mui-col-sm-6 mui-col-xs-6 listTit color4" >
		        	利息和费用：
		        </div>
		        <div class="mui-col-sm-6 mui-col-xs-6 listD color3" id="Interest">
		        	300元
		        </div>
		        <div class="mui-col-sm-6 mui-col-xs-6 listTit color4">
		        	到账金额：
		        </div>
		        <div class="mui-col-sm-6 mui-col-xs-6 listD color3" id="moneyBoxTit">
		        	5000元
		        </div>
			</div>
		</div>
		<!--footer-->
		<!--<div class="mui-row tabBarBox" >
			<li class="active fontS14" onclick="tabBar1()">
                <img src="resources/images/tab-bar11.png"> <br> 首页
	        </li>
  	        <li class="fontS14" onclick="tabBar2()">
                <img src="resources/images/tab-bar2.png"> <br>贷款
	        </li>
	        <li class="fontS14" onclick="tabBar3()">
	            <img src="resources/images/tab-bar3.png">  <br>社区
	        </li>
			<li class="fontS14" onclick="tabBar4()">
                <img src="resources/images/tab-bar4.png"> <br>我的
			</li>
		</div>
		<div class="tabBarBottom"></div>
			-->
			<!-- <a  href="www.baodu.com"><div class="footerBtn">立即申请</div></a> -->
			<a  href="#" id="toBtn"><div class="footerBtn">立即申请</div></a>
		</div>
		
		<div class=""> </div>
		<script>
			//获取贷款详情id
			 var id = GetQueryString("id");
			 var token = window.localStorage.token;
			 
			/*  window.localStorage.removeItem("uid"); */
			
			//获取用户id
			var uid = window.localStorage.uid;
			var toUrl = "";
			 //调接口必传 格式
			 var header={
			     	app_version : '1.1.1',
			     	app_model : 'ios',
			     	token : token,
			     	uid : uid
			     }
			 
			 	var body= "";
			 	var model ="";
			 	var jdata="";	
			 	body={
			 		id:id,
			 		uid:uid
			    }
			    model={
			    	body:body,
			    	header:header,
			    }
			    jdata=JSON.stringify(model);
				
				var vm = new Vue({
				el : '#app',
				data : {
					greenTags:[],
					showDetails:{}
				},
				created : function() {
					this.init();
				},
				methods : {
					init : function(){
						var that=this;
						$.ajax({
							url: 'loan/showDetails',
							method: 'post',
							data:{
								'data':jdata
							},
							success: function(data){
								var json=JSON.parse(data);
								that.showDetails = json.data; 
								that.greenTags = that.showDetails.tags; 
								if(that.showDetails.tags !="" && that.showDetails.tags != undefined){
									var arr = that.showDetails.tags.split(",");
									that.greenTags=arr;
								}
								var numberBox = json.data.averageqQuota;
								var  Interest = json.data.interestRate7; 
								toUrl = json.data.url;
								if(uid == "" || uid == undefined){
									$("#toBtn").attr("href","login.html");
								}else{
									$("#toBtn").attr("href",toUrl); 
								}
								//还款金额
								var repayment = parseFloat(Interest)*parseFloat(numberBox)+parseFloat(numberBox);
								$("#repayment").text(repayment);
								//利息
								var Interest = parseFloat(Interest)*parseFloat(numberBox);
								$("#Interest").text(Interest);
								//到账金额
								$("#moneyBoxTit").text(numberBox)
								
							},
							error: function(){
								/* alert("数据加载异常!"); */
							}
						});
					},
				},
				filters : {
					filterUrl : function(url){
						if(url ==null || url ==''){
							return "";
						}
					}
				}
			})
				
				
			$(".moneyTxt .moneydate").click(function(){
				$(this).addClass("active").siblings().removeClass("active");
				getMoney();
			});
				
			//input 改变金额
			$("#numberBox").on('input propertychange',function(){
				var numberBox = parseFloat($("#numberBox").val().trim());
				var Maxnumber = parseFloat($("#numberBox").attr("dataMax"));
				if(isNaN(numberBox)){
					$("#repayment").text("0");
					//利息
					$("#Interest").text("0");
					//到账金额
					$("#moneyBoxTit").text("0")
				}else{
					if(numberBox > Maxnumber){
						mui.toast("您当前最大额度为"+Maxnumber);
						$("#numberBox").val(Maxnumber);
					}else{
						getMoney()
					}
				} 
			})
			//获取实时金额
			function getMoney(){
				var numberBox = $("#numberBox").val();
				var  Interest = $(".moneyTxt .active").attr("data-Interest"); 
				//还款金额
				var repayment = parseFloat(Interest)*parseFloat(numberBox)+parseFloat(numberBox);
				$("#repayment").text(repayment);
				//利息
				var Interest = parseFloat(Interest)*parseFloat(numberBox);
				$("#Interest").text(Math.floor(Interest));
				//到账金额
				$("#moneyBoxTit").text(numberBox)
			}
			
			//登陆后 点击立即申请 提交资料
			if(uid != "" || uid != undefined){
				$(".footerBtn").click(function(){
					$.ajax({
						url: 'apply',
						method: 'get',
						data:{
							'uid':uid,
							'loanId':id
						},
						success: function(data){
							 var json=JSON.parse(data);
							 that.hotList = json.data; 
						},
						error: function(){
							/* mui.toast("请稍后再试!");  */
						}
					});
				})
			}
			
		</script>		
	</body>

</html>